<template>
	<div class="details-basic-info">
		<div class="basicinfo-con1">
			<h4 class="prod-title">嘉实多全合成机油保养套餐（韩滤芯）</h4>
			<!-- prod-price-wrap -->
			<div class="prod-price-wrap display_flex">
				<div class="prod-price flex_1">
					<span class="yang-pic">￥</span>
					<span class="yang-pic-price">
						<em class="big-price">12222</em>
						<em class="small-price">.00</em>
					</span>
				</div>

				<div class="prod-price-depreciate display_flex">

					<!-- 非固定价格 -->
					<div v-show="detailsStaticPrice == 'nonFixed' ? 'nonFixed' : null">
						<span>需到店根据车型定价，仅供参考</span>
					</div>

					<!-- 折扣 -->
					<div v-show="detailsStaticPrice == 'discount' ? 'discount' : null">
						<span>原价  ￥<em>123.00</em></span>
						<span class="place-order">线上下单享9折</span>
					</div>

					<!--直降-->
					<div v-show="detailsStaticPrice == 'plummets' ? 'plummets' : null">
						<span>原价￥<em>39.20</em></span>
						<span class="plummetsPrice">直降<i>80</i>元</span>
					</div> 

				</div>

			</div>
			<!-- end prod-price-wrap -->
		</div> 
		<div class="gift" @click="shopGift" v-show="coupon">
			<div class=""><strong>满赠</strong>购满500元减20元</div>
			<div class=""><strong>满赠</strong>购满500元增空调清洗</div>
			<div class="gift-icon"> > </div>
		</div>

		<!-- shopGift -->
		<mt-popup :visible.sync="popupVisible" popup-transition="popup-fade">
			  <ul class="popup-box">
			  	<li class="clearfix">
			  		<span class="fl gift-label">买赠</span>
			  		<div class="fl gift-explain">
			  			<h5>赠送20项安全检测</h5>
			  			<p class="gift-time">活动时间：2016.9.30-2016.10.30</p>
			  		</div>
			  	</li>
			  	<li class="clearfix">
			  		<span class="fl gift-label">买赠</span>
			  		<div class="fl gift-explain">
			  			<h5>赠送50元保养券</h5>
			  			<p class="gift-time">活动时间：2016.9.30-2016.10.30</p>
			  		</div>
			  	</li>
			  </ul>
			  <div class="popup-button">
			  	<a @click="popUp">确定</a>
			  </div>
			  <div class="details-basic-info-close" @click="giftsClose"> x </div>
		</mt-popup>
		<!-- end shopGift -->

	</div>
	
</template>

<script type="text/javascript">

	import Vue from 'vue';
	//弹窗
	import {Popup} from 'mint-ui';
	Vue.component(Popup.name, Popup);

	// 状态
	var staticPrice = ['fixed', 'nonFixed', 'discount', 'plummets', 'coupon'];

	export default {
		data() {
			return {
				popupVisible: false, //
				detailsStaticPrice: '', // 状态
				coupon: '', // 优惠券
			}
		},
		methods: {
			shopGift: function() {
				this.popupVisible = !this.popupVisible;
			},
			// 关闭满赠窗口
			giftsClose: function () {
				this.popupVisible = !this.popupVisible;
			},
			popUp: function () {
				this.giftsClose();
			}
		},
		ready: function () {

			// 显示状态
			this.detailsStaticPrice = staticPrice[3];
			// 优惠券
			this.coupon = staticPrice[staticPrice.length - 1];
		
			

		}
	}

</script>

<style lang="scss" scoped>

	@import '../../assets/css/_variables.scss';
	@import '../../assets/css/_functions.scss';

	.details-basic-info {
		padding-top: $_defaultFont / 2;
		background: $_fff;
		font-size: $_defaultFont - 7;
		border-top: 1px solid $_eee;
		padding-bottom: rem(8);
		.basicinfo-con1 {
			padding: 0 $_defaultFont / 4 * 3 + 1;
			h4 {
				font-size: rem(16);
				color: $_243742;
				line-height: rem(24);
			}
			.prod-price-wrap {
				font-size: rem(20);
				line-height: rem(36);
				line-height: rem(42);
				height: rem(36);
				padding-bottom: rem(2);
				.prod-price {
					color: $_fe3824;
					margin-right: rem(12);
				}
				.yang-pic,.small-price {
					font-size: rem(14);
				}
				.prod-price-depreciate {
					font-size: rem(12);
					color: #999;
				}
				.plummetsPrice {
					background: $_ff6600;
					color: $_fff;
					font-size: rem(10);
					padding: 0 rem(2);
					border-radius: rem(1);
				}
				.place-order {
					@include hlh(18px);
					color: $_ff6600;
					font-size: rem(10);
					border-radius: rem(2);
					border: 1px solid $_ff6600;
					padding: 0 rem(2);
					margin-left: rem(4);
					margin-top: rem(10);
				}
			}
		}
		.gift {
			border-top: 1px solid $_eee;
			padding-top: rem(6);
			margin-left: rem(16);
			position: relative;
			>div {
				line-height: rem(24);
				font-size: rem(13);
			}
			strong {
				padding: rem(1) rem(2);
				font-weight: normal;
				font-size: rem(10);
				border: 1px solid $_ff0000;
				color: $_ff0000;
				border-radius: rem(4);
				margin-right: rem(7);
			}
			.gift-icon {
				position: absolute;
				top: 50%;
				margin-top: - rem(12);
				right: rem(5);
			}
		}
		.mint-popup {
			width: 100%;
			transform: translate3d(0, 0, 0);	
			top: auto;
			left: auto;
			bottom: 0;
			position: fixed;
			.popup-box {
				padding-top: rem(16);
				li {
					height: rem(64);
					border-bottom: 1px solid $_eee;
					padding-left: rem(10);
					padding-top: rem(10);
				}
				.gift-label {
					font-size: rem(10);
					border: 1px solid $_ff0000;
					color: $_ff0000;
					margin-right: rem(8);
					border-radius: rem(2);
					padding: 0 rem(2);
					margin-top: rem(2);
				}
				.gift-explain {
					h5 {
						font-size: rem(15) !important;
						line-height: rem(18);
						color: $_333;
					}
					.gift-time {
						font-size: rem(13);
						line-height: rem(26);
						color: $_999;
					}
				}
			}
			.popup-button {
				@include hlh(48px);
				width: 100%;
				margin-top: rem(108);
				text-align: center;
				background: $_0299f6;
				a {
					display: block;
					color: $_fff;
					font-size: rem(18);
				}
			}
			.details-basic-info-close {
				position: absolute;
				right: rem(10);
				top: rem(10);
				font-size: 14px;
			}
		}
	}
</style>